<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta http-equiv="Content-Language" content="zh-cn" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="袋鼠短剧" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta name="keywords" content="短剧,袋鼠,短视频,短视频播放器,袋鼠短剧,袋鼠播播" />
    <meta name="author" content="mxp131011@qq.com" />
    <meta name="generator" content="vscode" />
    <meta name="copyright" content="玛游(重庆)网络科技有限公司" />
    <meta name="theme-color" content="#ffffff" />
    <link rel="icon" href="/images/favicon.png" type="image/png" />
    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
    <link href="/css/index-page-loading.css" rel="stylesheet" />
    <link href="/css/index-page-err.css" rel="stylesheet" />
    <title>短视频</title>
  </head>

  <body>
    <div id="app" class="html-body-app">
      <!-- 加载中 -->
      <div class="first-loading-wrp" id="index-html-loading-wrp" style="display: none">
        <div class="loading-wrp">
          <span class="dot dot-spin">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </span>
        </div>
        <div class="text-box">
          <h2 class="text">欢迎使用 —— 短视频</h2>
        </div>
      </div>
      <!-- 不支持 -->
      <div class="index-html-err-box" id="index-html-err-box" style="display: none">
        <div class="img-box">
          <img class="img global-slide-up-animation" style="animation-delay: 0.1s" alt="" src="/images/nonsupport.svg" draggable="false" />
        </div>
        <div class="subject-box">
          <div class="title global-slide-up-animation" style="animation-delay: 0.2s">抱歉!</div>
          <div class="subtitle global-slide-up-animation" style="animation-delay: 0.3s">当前浏览器暂不支持访问...</div>
          <div class="explain global-slide-up-animation" style="animation-delay: 0.4s">
            我们的网站暂不支持IE内核或者内核版本过低的浏览器访问,请使用其他浏览器[如:
            <a href="https://www.microsoft.com/zh-cn/edge" target="_blank" rel="noopener">Microsoft Edge(微软新版浏览器)</a>
            ,
            <a href="https://www.google.cn/chrome/" target="_blank" rel="noopener">Google Chrome(谷歌浏览器)</a>
            ,
            <a href="http://www.firefox.com.cn/" target="_blank" rel="noopener">Firefox(火狐浏览器)</a>
            ,
            <a href="https://browser.360.cn/" target="_blank" rel="noopener">360浏览器</a>
            ,
            <a href="https://browser.qq.com/" target="_blank" rel="noopener">QQ浏览器</a>
            ,
            <a href="https://ie.sogou.com/" target="_blank" rel="noopener">搜狗浏览器</a>
            ,
            <a href="https://www.liebao.cn/" target="_blank" rel="noopener">猎豹浏览器</a>
            ,
            <a href="https://www.maxthon.cn/" target="_blank" rel="noopener">遨游浏览器</a>
            ]等等试试,注意如有极速模式(非IE模式)和兼容模式(IE模式)的浏览器请使用极速模式。
          </div>
          <a class="butt global-slide-up-animation" style="animation-delay: 0.5s" href="https://www.microsoft.com/zh-cn/edge" target="_blank" rel="noopener">
            <span>下载Microsoft Edge(强烈推荐)</span>
          </a>
          <a class="butt global-slide-up-animation" style="animation-delay: 0.6s" href="https://www.google.cn/chrome/" target="_blank" rel="noopener">
            <span>下载谷歌浏览器(推荐)</span>
          </a>
        </div>
      </div>
    </div>
    <script type="module">
      document.getElementById('index-html-loading-wrp').style.display = 'flex';

      /** 设置主题 */
      let theme = window.sessionStorage.getItem('GLOBAL_THEME');
      if (!['dark', 'light'].includes(theme)) {
        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
      }
      const appDom = document.getElementById('app');
      const isDark = appDom.className.split(/\s+/).some((item) => item === 'dark');
      if (theme === 'light' && isDark) {
        appDom.classList.remove('dark');
      } else if (theme === 'dark' && !isDark) {
        appDom.classList.add('dark');
      }

      /** 设置访问pc版还是H5版 */
      if (isSupportVisitFun()) {
        import('./src/main.ts');
      } else {
        document.getElementById('index-html-loading-wrp').style.display = 'none';
        document.getElementById('index-html-err-box').style.display = 'flex';
      }

      /**
       *判断是否支持本应用
       */
      function isSupportVisitFun() {
        const broswer = myGetBroswerInfo();
        const version = broswer.version;
        const type = broswer.type;
        if (import.meta.env.DEV) {
          return (type === 'firefox' && version >= 74) || (type === 'chrome' && version >= 80) || (type === 'safari' && version >= 13.1);
        } else {
          return (type === 'firefox' && version >= 74) || (type === 'chrome' && version >= 70) || (type === 'safari' && version >= 13.1);
        }
      }

      /**
       * 得到浏览器信息
       */
      function myGetBroswerInfo() {
        const ua = navigator.userAgent.toLowerCase();
        const firefox = ua.match(/firefox\/([\d.]+)/);
        const chrome = ua.match(/chrome\/([\d.]+)/);
        const safari = ua.match(/version\/([\d.]+).*safari/);
        if (firefox) {
          return { type: 'firefox', version: parseFloat((firefox[1] || '').replace(/[^\d.]/g, '')) || 0 };
        }
        if (chrome) {
          return { type: 'chrome', version: parseFloat((chrome[1] || '').replace(/[^\d.]/g, '')) || 0 };
        }
        if (safari) {
          return { type: 'safari', version: parseFloat((safari[1] || '').replace(/[^\d.]/g, '')) };
        }
        return { broswer: '', version: 0 };
      }
    </script>
  </body>
</html>
